<template>

	<view class="news-card" @click="$emit('click')">

		<view class="news-content">
			<!-- 有图片的新闻布局 -->
			<view v-if="newsData.hasImage" class="news-with-image">
				<view class="text-content">
					<text class="news-title">{{ newsData.title }}</text>
					<view class="news-meta">
						<text class="top-tag" v-if="newsData.isTop">置顶</text>
						<text class="news-source">{{ newsData.source }}</text>
						<text class="news-comments">{{ newsData.comments }}评</text>
						<text class="news-date">{{ newsData.date }}</text>
					</view>
				</view>
				<image :src="getImageUrl(newsData.imageUrl)" class="news-image" mode="aspectFill"></image>
			</view>

			<!-- 无图片的新闻布局 -->
			<view v-else class="news-text-only">
				<text class="news-title">{{ newsData.title }}</text>
				<view class="news-meta">
					<text class="top-tag" v-if="newsData.isTop">置顶</text>
					<text class="news-source">{{ newsData.source }}</text>
					<text class="news-comments">{{ newsData.comments }}评</text>
					<text class="news-date">{{ newsData.date }}</text>
				</view>
			</view>
		</view>

		<slot name="search" v-if="newsData.sslot"></slot>
	</view>
</template>

<script>
	export default {
		name: "cardviewtext",
		props: {
			newsData: {
				type: Object,
				required: true,
				default: () => ({})
			}
		},
		emits: ['click'],
		methods: {
			getImageUrl(filename) {
				return `/static/${filename}`;
			}
		}
	}
</script>

<style scoped>
	.news-card {
		margin: 0 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.news-with-image {
		display: flex;
		justify-content: space-between;
	}

	.text-content {
		flex: 1;
		margin-right: 20rpx;
	}

	.news-text-only {
		display: flex;
		flex-direction: column;
	}

	.news-title {
		font-size: 32rpx;
		font-weight: 500;
		line-height: 1.5;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	.news-meta {
		display: flex;
		align-items: center;
		gap: 20rpx;
		font-size: 24rpx;
		flex-wrap: wrap;
	}

	.top-tag {
		color: #ff5a5f;
		font-weight: bold;
		padding: 4rpx 12rpx;
		background-color: #fff;
		border: 1rpx solid #ff5a5f;
		border-radius: 6rpx;
	}

	.news-source {
		color: #333;
		font-weight: 500;
	}

	.news-comments {
		color: #666;
	}

	.news-date {
		color: #999;
	}

	.news-image {
		width: 200rpx;
		height: 140rpx;
		border-radius: 8rpx;
		flex-shrink: 0;
	}
</style>